<template>
<div class="fullscreen">
<!-- <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        <template v-if="markers!=null && markers.length>0">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
        </template>
      </el-amap> -->
            <el-amap ref="map" vid="amapDemo"  :center="center" :zoom="zoom" :events="events" class="amap-demo">
                  <template v-if="markers!=null && markers.length>0">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
        </template>
          </el-amap>
   <el-button round @click="handleClick" class="save-button" size="big">保存轨迹</el-button>
       查看日期：<el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        @change="changeDate"
        value-format="yyyy-MM-dd"
        class="date"
        placeholder="选择日期">
      </el-date-picker>
       <el-button round @click="handleDelete" class="delete-button" size="big">删除轨迹</el-button>
</div>
</template>
<script>
import AMap from 'AMap'
import { batchSave, deleteBatch } from '@/apis/track'
import {formatDate} from '@/utils/date.js'
import { saveInfo, deleteByDate } from '@/apis/basicInfo'
import { vdeleteByDate } from '@/apis/violation'
import { listByDate } from '@/apis/track.js'
export default {
  name: 'addTrack',
  created () {
    listByDate(formatDate(new Date(), 'yyyy/MM/dd')).then(e => {
      this.tracks = e.data
      if (e.data.length > 0) {
        this.$message('已经有数据了')
      }
      e.data.map(element => {
        this.markers.push({
          position: [element.longitude, element.latitude],
          visible: true
        })
      })
    })
  },
  // mounted () {
  //   this.init()
  // },
  data () {
    return {
      markerList: [],
      tracks: [],
      events: {
        init: (o) => {
          console.log(o.getCenter())
          console.log(this.$refs.map.$$getInstance())
          o.getCity(result => {
            console.log(result)
          })
        },
        'moveend': () => {
        },
        'zoomchange': () => {
        },
        'click': (e) => {
          console.log(e)
          const marker = {
            position: [e.lnglat.lng, e.lnglat.lat],
            events: {
              click: () => {
                for (let index = 0; index < this.markers.length; index++) {
                  const element = this.markers[index]
                  if (element.position[0] === e.lnglat.lng) {
                    this.markers.splice(index, 1)
                    console.log(1111)
                  }
                }
                for (let index = 0; index < this.markerList.length; index++) {
                  const element = this.markerList[index]
                  if (element.marker.position[0] === e.lnglat.lng) {
                    this.markerList.splice(index, 1)
                  }
                }
              }
            },
            visible: true,
            draggable: false,
            template: '<span>1</span>'
          }
          this.markers.push(marker)
          var obj = {
            time: this.date,
            marker: marker
          }
          this.markerList.push(obj)
          console.log(this.markerList)
        }
      },
      date: new Date(),
      map: {},
      points: [],

      count: 1,
      violation: {
        date: '',
        type: '',
        longitude: '',
        latitude: ''
      },
      // slotStyle: {
      //   padding: '2px 8px',
      //   background: '#eee',
      //   color: '#333',
      //   border: '1px solid #aaa'
      // },
      zoom: 14,
      show: false,
      center: [113.660062, 34.860228],
      markers: [],
      longitude: '',
      latitude: '',
      // renderMarker: {
      //   position: [121.5273285, 31.21715058],
      //   contentRender: (h, instance) => {
      //     // if use jsx you can write in this
      //     // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
      //     return h(
      //       'div',
      //       {
      //         style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
      //         on: {
      //           click: () => {
      //             // const position = this.renderMarker.position
      //             // this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002]
      //           }
      //         }
      //       },
      //       ['marker inner text']
      //     )
      //   }
      // },
      // componentMarker: {
      //   position: [121.5273285, 31.21315058]
      //   // contentRender: (h, instance) => h(exampleComponents, {style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
      // },
      slotMarker: {
        position: [121.5073285, 31.21715058]
      }
    }
  },
  methods: {
    updateInfo () {

    },
    handleDelete () {
      deleteBatch(this.tracks)
      deleteByDate(formatDate(this.date, 'yyyy/MM/dd'))
      vdeleteByDate(formatDate(this.date, 'yyyy/MM/dd'))
    },
    // 改变时间
    changeDate () {
      this.markerList = []
      this.markers = []
      listByDate(formatDate(this.date, 'yyyy/MM/dd')).then(e => {
        this.tracks = e.data
        if (e.data.length > 0) {
          this.$message('已经有数据了')
        }
        e.data.map(element => {
          this.markers.push({
            position: [element.longitude, element.latitude],
            visible: true
          })
        })
      })
    },
    handleClick () {
      let data = []
      debugger
      this.markerList.forEach(element => {
        var track = {
          latitude: element.marker.position[1],
          longitude: element.marker.position[0],
          time: element.time
        }
        // console.log(track)
        data.push(track)
      })
      if (data.length > 1) {
        var distance = 0
        for (let index = 1; index < data.length; index++) {
          distance += parseInt(AMap.GeometryUtil.distance([data[index - 1].longitude, data[index - 1].latitude], [data[index].longitude, data[index].latitude]))
        }
        distance = 1.0 * distance / 1000
        distance = Math.round(distance * 10) / 10
        var param = {
          totalDistance: distance,
          time: this.date = formatDate(this.date, 'yyyy-MM-dd')
        }
        saveInfo(param)
      }
      console.log(data)
      batchSave(data).then(e => {
        this.$message('添加成功')
      })
    }
  }
}
</script>
<style type="text/css" scoped>
  .fullscreen{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F4F5F5;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
  }
   .map{
        height: 100%;
        width: 100%;
        float: left;
    }
    .save-button{
      position: absolute;
      top: 0;
      margin-top: 10px;
      left: 0;
    }
    .delete-button{
      position: absolute;
      top: 60px;
      /* margin-top: 10px; */
      left: 0;
    }
    .amap-demo {
      height: 100%;
      width: 100%;
    }
    .date{
       position: absolute;
      top: 0;
      margin-top: 10px;
      left: 0;
      margin-left: 110px;
    }
</style>
